<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>移动端上传裁剪图片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <link rel="stylesheet" href="css/cropper.css">
    <script src="js/jquery-2.0.2.min.js"></script>
    <script src="js/cropper.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .bgco {
            height: 1000px;
            overflow: hidden;
            background-color: #dcdcb3;
        }
        
        .box {
            position: relative;
            width: 246px;
            margin: 100px auto;
        }
        
        .imgArea {
            height: 159px;
            line-height: 159px;
            margin-top: 10px;
            text-align: center;
            background-color: #5d4356;
            border-radius: 5%;
            overflow: hidden;
        }
        
        .ka1 {
            position: absolute;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-image: url(./images/card-3.png);
            width: 246px;
            height: 159px;
            border-radius: 15px 15px;
            bottom: 0;
            left: 0;
        }
        
        #mark {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #05332c;
        }
        
        .content {
            margin: 0 20px;
        }
        
        #buttonArea {
            margin: 10px auto;
        }
        
        #buttonArea>ul,
        .resultArea>ul {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }
        
        #buttonArea>ul>li,
        .resultArea>ul>li {
            list-style: none;
            padding: 5px 10px;
            border-radius: 4px;
            overflow: hidden;
            font-weight: 700;
            color: aliceblue;
            background-color: #4a807a;
        }
        
        #caijian {
            width: 100%;
            height: 200px;
        }
        
        #portrait {
            width: 100%;
        }
        
        .yulan {
            position: relative;
            margin-left: 50px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        
        .small {
            width: 246px;
            height: 159px;
            border-radius: 15px 15px;
            overflow: hidden;
        }
        
        .ka {
            position: absolute;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-image: url(./images/card-3.png);
            width: 246px;
            height: 159px;
            border-radius: 15px 15px;
            top: 0;
            left: 0;
            z-index: 99;
        }
    </style>
</head>

<body>
    <div class="bgco">
        <div class="box">
            <input class="hideInput" type="file" accept="image/*" onchange="showPreview(this)">
            <div class="imgArea">
            </div>
            <div class="ka1"></div>
        </div>
    </div>

    <div id="mark" style="display: none;">
        <div style="height: 50px;"></div>
        <div class="content">

            <div id="caijian">
                <img id="portrait" src="" alt="">
            </div>
            <div id="buttonArea">
                <ul>
                    <li id="moveleft">左移</li>
                    <li id="moveright">右移</li>
                    <li id="movetop">上移</li>
                    <li id="movedown">下移</li>
                </ul>
                <ul>
                    <li id="movelarge">放大</li>
                    <li id="movesmall">缩小</li>
                    <li id="rotateR">右转</li>
                    <li id="rotateL">左转</li>
                </ul>
                <!-- <input id="moveright" type="button" value="右移">
                <input id="movetop" type="button" value="上移">
                <input id="moveleft" type="button" value="左移">
                <input id="movedown" type="button" value="下移"> -->
                <!-- <input id="movelarge" type="button" value="放大">
                <input id="movesmall" type="button" value="缩小">
                <input id="rotateR" type="button" value="右转">
                <input id="rotateL" type="button" value="左转"> -->
            </div>


            <div class="yulan">
                <div class="small"></div>
                <div class="ka"></div>
            </div>
            <div class="resultArea">
                <ul>
                    <li id="cancel">取消</li>
                    <li id="confirm">确定</li>
                </ul>
                <!-- <input id="cancel" type="button" value="取消">
                <input id="confirm" type="button" value="确定"> -->
            </div>
        </div>
    </div>
</body>
<script>
    function showPreview(source) {
        var file = source.files[0];
        if (window.FileReader) {
            var fr = new FileReader();
            fr.readAsDataURL(file);

            fr.onload = function(e) {
                caijiantupian(e)
            };
        }
    }

    function caijiantupian(e) {
        $("#mark").show()
        $("#portrait").attr("src", e.target.result);
        // document.getElementById("portrait").src = e.target.result;
        $('#portrait').cropper({
            aspectRatio: 82 / 53,
            viewMode: 1,
            autoCropArea: 0.7,
            highlight: true,
            preview: ".small",
            // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
            // dragCrop: false,
            // 是否允许移动裁剪图片
            // movable: false,
            // 是否允许改变剪裁框的大小
            // resizable: false,
            // 是否通过拖拽来移动剪裁框
            // cropBoxMovable: false,
            // 是否通过拖动来调整剪裁框的大小
            cropBoxResizable: false,
            // crop: function(ev) {
            //     console.log(ev);
            // }
        });
    }
    $("#moveright").on("click", function() {
        $('#portrait').cropper('move', 3, 0);
    })
    $("#movetop").on("click", function() {
        $('#portrait').cropper('move', 0, -3);
    })
    $("#moveleft").on("click", function() {
        $('#portrait').cropper('move', -3, 0);
    })
    $("#movedown").on("click", function() {
        $('#portrait').cropper('move', 0, 3);
    })
    $("#movelarge").on("click", function() {
        $('#portrait').cropper('zoom', 0.1);

    })
    $("#movesmall").on("click", function() {
        $('#portrait').cropper('zoom', -0.1);
    })
    $("#rotateR").on("click", function() {
        $('#portrait').cropper('rotate', 45);

    })
    $("#rotateL").on("click", function() {
        $('#portrait').cropper('rotate', -45);
    })
    $("#cancel").on("click", function() {
        $("#mark").hide()
        $(".hideInput").val("");
        $('#portrait').cropper('destroy');
    })
    $("#confirm").on("click", function() {
        var $imgData = $('#portrait').cropper('getCroppedCanvas');
        var dataurl = $imgData.toDataURL('image/png');
        $('#portrait').cropper('destroy');
        $("#mark").hide()
        $(".hideInput").val("");
        var img = document.createElement("img");
        $(img).attr("src", dataurl);
        $(".imgArea").empty();
        $(".imgArea").append(img)
        $(".imgArea>img").css({
            'width': '100%',
            'height': '100%'
        });
    })
</script>

</html>